<template>
  <section :class="$style.app">
    <Swiper
      :hots="hots"
    />
    <div :class="$style.content">
      <Search :hots="hots"/>
      <film :lists="filmLists"/>
      <comedy
        :lists="comedyLists"
        title="喜剧"/>
      <Aiqiyi
        :lists="actionLists"
        title="动作"/>
    </div>
  </section>
</template>

<script>
import Swiper from '../components/home/swiper'
import Search from '../components/home/search'
import Film from '../components/home/film'
import http from '../APIService/http'
import Comedy from '../components/home/type'
import Aiqiyi from '../components/home/aiqiyi'
export default {
  layout: 'index',
  components: {
    Swiper,
    Search,
    Film,
    Comedy,
    Aiqiyi
  },
  data() {
    return {
      filmLists: []
    }
  },
  async asyncData(ctx) {
    try {
      let token = ctx.app.$cookiz.get(ctx.app.$api.token)
      let params = {
        token
      }
      let [hotRes, filmRes, comedyRes, actionRes] = await Promise.all([
        http.get(`/dianshang/getHotFilm`),
        http.get(`/dianshang/filmLists`, params),
        http.get(`/film/getFilmType`, { type: '喜剧', token }),
        http.get(`/film/getFilmType`, { type: '动作', token })
      ])
      let hots = hotRes.data.filter(item => item.coverurl).map(item => ({
        name: item.original_title,
        id: item.doubanId,
        img: item.coverurl
      }))
      return {
        hots,
        filmLists: filmRes.data,
        comedyLists: comedyRes.data,
        actionLists: actionRes.data
      }
    } catch (err) {
      console.log('hot film fail:', err)
    }
  }
}
</script>

<style lang="scss" module>
body {
  background: #f8fafc;
}
.content {
  margin: 0 auto;
  max-width: 1200px;
  dd {
    margin-left: 0px;
  }
}
</style>
